<template>
	<view>
		<view>
			<view class="hd">
				<u-tabs-swiper ref="uTabs" :list="tablist" :current="current" @change="tabsChange" :is-scroll="false" :show-bar="false" swiperWidth="100%" font-size="40" height="120"  ></u-tabs-swiper>
			</view>
			<view class="content">
				<swiper :style="{ height: swiperHeight }" class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom">
							<!-- 全部 -->
							<view class="content-item content-item-all" >
								<!-- 岗位列表 -->
								<view class="recruit" v-if="JSON.stringify(getrecList) !== '[]'">
									<view class="text">收藏-岗位</view>
									<view v-for="(item1, index1) in getrecList" :key="item1.id" class="setBorder">
										<recruitList :recruitData="item1" @recruitDetail="gotorecruitDetail(item1)" ></recruitList>						
									</view>
									
								</view>
								<!-- 兼职列表 -->
								<view class="parttime" v-if="JSON.stringify(getparList) !== '[]'">
									<view class="text">收藏-兼职</view>
									<view v-for="(item2, index2) in getparList" :key="item2.id">
										<parttimeList :parttimeData="item2" @parttimeDetail="gotoParttimeDetail(item2)"></parttimeList>
									</view>
								</view>
							</view>
							<view class="content-item nodata" v-if="JSON.stringify(getrecList) === '[]' && JSON.stringify(getparList) === '[]'">暂无收藏~</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom">
							<!-- 岗位列表 -->
							<view class="content-item" v-if="JSON.stringify(getrecList) !== '[]'">
								<view v-for="(item3, index3) in getrecList" :key="item3.id" class="setBorder">
									<recruitList :recruitData="item3" @recruitDetail="gotorecruitDetail(item3)" ></recruitList>
								</view>
							</view>
							<view class="content-item nodata" v-else>暂无收藏~</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom">
							<!-- 兼职列表 -->
							<view class="content-item" v-if="JSON.stringify(getparList) !== '[]'">
								<view v-for="(item4, index4) in getparList" :key="item4.id">
									<parttimeList :parttimeData="item4" @parttimeDetail="gotoParttimeDetail(item4)"></parttimeList>
								</view>
							</view>
							<view class="content-item nodata" v-else>暂无收藏~</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';

export default {
	data() {
		return {
			// content高度
			swiperHeight: '',
			// tabs高度
			tabsHeight:20,
			// 设备信息
			sysInfo:'',
			// 屏幕宽度
			winWidth:750,
			tablist: [
				{
					name: '全部'
				},
				{
					name: '岗位'
				},
				{
					name: '兼职'
				}
			],
			current: 0,
			swiperCurrent: 0 // swiper组件的current值，表示当前那个swiper-item是活动的
		};
	},
	onLoad() {
		// 获取设备信息
		this.sysInfo = uni.getSystemInfoSync();
		this.winWidth=this.sysInfo.screenWidth
		this.swiperHeight = (this.sysInfo.windowHeight - 60) * 2 + 'rpx';
	},
	onReady() {
		// 动态获取可使用窗口高度，设置swiper的高度
		uni.createSelectorQuery().select('.hd').boundingClientRect(data=>{
			this.tabsHeight=data.height
			this.swiperHeight = (this.sysInfo.windowHeight - this.tabsHeight) * 2 + 'rpx';
		}).exec()
		
	},
	methods: {
		tabsChange(index) {
			// console.log(index);
			this.swiperCurrent = index;
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		// scroll-view到底部加载更多
		onreachBottom() {},
		// 跳转去兼职详情
		gotoParttimeDetail(item) {
			uni.navigateTo({
				// url要传id参数
				url: '/subpkg/parttime/parttimeDetail?item=' + encodeURIComponent(JSON.stringify(item))
			});
		},
		// 跳转去岗位详情
		gotorecruitDetail(item) {
			uni.navigateTo({
				// url要传id参数
				url: '/subpkg/recruit/recruitDetail?item=' + encodeURIComponent(JSON.stringify(item))
			});
		}
	},
	computed: {
		// 从vuex中获取已收藏的数据
		...mapState('m_collect', ['recruitList', 'parttimeList']),
		...mapState( ['token']),
		
		// 没有token不展示收藏内容
		getrecList(){
			if(this.token){
				return this.recruitList
			}else{
				return []
			}
		},
		// 没有token不展示收藏内容
		getparList(){			
			if(this.token){
				return this.parttimeList
			}else{
				return []
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.swiper {
	height: 1600rpx;
}
.content {
	margin-top: 10rpx;
	box-sizing: border-box;
}
/* 岗位 */
.setBorder {
	border-top: 2rpx solid #bbbbbb;
	&:last-child {
		border-bottom: 2rpx solid #bbbbbb;
	}
}
.content-item {
	padding: 20rpx 0;
}
.content-item-all {
	padding-top: 0;
	.text {
		width: 100%;
		color: white;
		margin-bottom: 20rpx;
		text-align: center;
		background-color: #00dcb6;
		padding: 14rpx 0;
		font-size: 38rpx;
		font-weight: 700;
	}
	.parttime {
		.text {
			margin-bottom:50rpx;
		}
	}
	.recruit,.parttime{
		box-shadow: 0 0 12rpx #ccc;
			margin:10rpx 20rpx 40rpx;
			border-radius: 12rpx;
			padding-bottom: 30rpx;
			overflow: hidden;
	}
	.setBorder {
		border-top: 0;
		border-bottom: 2rpx solid #bbbbbb;
		&:last-child {
			border-bottom: 0;
		}
	}
}
.content-item-parttime {
	padding-top: 20rpx;
}
/* 无数据 */
.nodata {
	width: 100%;
	text-align: center;
	color: #bbbbbb;
}
</style>
